<template>
  <div class="main">
    <h1 class="child1">个人信息</h1>
    <div class="child2">
      <div class="xinxi">
        <el-container>
          <el-aside width="100px" >
            <img  v-if="this.head == '王胤霖'" width="100" src="http://tiebapic.baidu.com/forum/w%3D580/sign=ae63fd3ef61c8701d6b6b2ee177e9e6e/362e3b610c3387446be86ca6140fd9f9d62aa0c3.jpg?tbpicau=2022-07-08-05_505b110222368bb61ceb82e2fe6b4420" alt="" title="我的头像">
            <img  v-if="this.head == '衣丰厚'" width="100" src="https://portrait.gitee.com/uploads/avatars/user/3730/11190152_rich-clothes_1655817921.png" alt="" title="头像">
            <img  v-if="this.head == '田思远'" width="100" src="https://img1.baidu.com/it/u=2570318333,2929793128&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="" title="头像">
            <img  v-if="this.head == '锟斤拷锟斤拷'" width="100" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg95.699pic.com%2Fxsj%2F02%2Fog%2Fhs.jpg%21%2Ffw%2F700%2Fwatermark%2Furl%2FL3hzai93YXRlcl9kZXRhaWwyLnBuZw%2Falign%2Fsoutheast&refer=http%3A%2F%2Fimg95.699pic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659848380&t=f2214bf065286669fde13c10e098460c" alt="" title="头像">
          </el-aside>
        <el-main>
        <!-- <h3>姓名：{{ patient.real_name }}</h3>
        <h3>手机号：{{ patient.telephone }}</h3>
        <h3>身份证号：{{ patient.patient_id }}</h3> -->
        
        <tr>
          <td><font size='6' face='STKaiti' color="white">姓名：{{ patient.real_name }}</font></td>
        </tr>
        <tr>
          <td><font size='3' color="white">手机号：{{ patient.telephone }}</font></td>
        </tr>
        <tr>
          <td><font size='3' color="white">身份证号：{{ patient.patient_id }}</font></td>
        </tr>
        </el-main>
        </el-container>
      </div>

      
      <div class="tc" v-for="props in personData" :key="props">
            <font v-if="this.personData[0].special == 1" size="3" color="red">特殊用户</font>
            <font v-if="this.personData[0].special == 0" size="3" color="white">普通用户</font>
        <el-button type="warning" @click="tuichu">退出当前用户</el-button>

        <el-button color="#156a65" size="large" plain @click="add()">
        <font v-if="this.personData[0].special == 0" size="3" color="black">点此申请成为特殊用户</font>
        </el-button>

      </div>
    </div>
    
    <h1 class="child3">就诊信息</h1>
    <div class="child4">
      <div class="jz" v-for="props in personData" :key="props">
        <el-card shadow="always">
          <div class="aa">
            <el-image :src="props.img" class="image" />
          </div>
          <div class="xx">
            编号:{{props.id}}
            <h4>就诊日期：{{ props.day }}</h4>
            <h4>上午：{{ props.amwork }}||下午：{{ props.pmwork }}</h4>
            <h4>就诊科室：{{ props.departmentName }}</h4>
            <h4>就诊医生：{{ props.docName }}</h4>
            <h4 v-if="this.personData[0].special == 0">就诊类型：{{ props.feeName }} 价格：{{ props.money }}元</h4>
            <h4 v-if="this.personData[0].special == 1">就诊类型：{{ props.feeName }} 价格： 0元</h4>
            <!-- 挂号价格在这里可改 -->
            <!-- v-if="this.sessionStorage.special == 0" -->
          </div>

          <div class="dz">
            <el-popconfirm title="确认要取消挂号吗?" @confirm="reset(props)">
              <template #reference>
                <el-button type="info" size="large">取消挂号</el-button>
              </template>
            </el-popconfirm>
            <el-button
              type="primary"
              plain
              size="large"
              @click="reset123(props)"
            >
              确认缴费
            </el-button>
          </div>
        </el-card>
      </div>
    </div>
  </div>
  <div class="gr"></div>

  <el-dialog v-model="applyWindow" title="提交申请" width="30%">
    <el-form label-width="120px">
      <el-form-item label="用户名">
        <el-input v-model="applyInfo.userName" />
      </el-form-item>
       <el-form-item label="相关证明材料图片">
        <el-input v-model="applyInfo.pictureUrl" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="applyWindow = false">取消</el-button>
        <el-button type="primary" @click="addApply()" v-model="applyWindow"
          >确认提交</el-button>
      </span>
    </template>
    </el-dialog>

</template>

<script>
import { ElMessage } from "element-plus";
import { get } from "../../utils/request";
export default {
  data() {
    return {
      loginState: sessionStorage.login,
      patient: {
        patient_id: sessionStorage.patient_id,
        telephone: sessionStorage.telephone,
        real_name: sessionStorage.real_name,
        special:sessionStorage.special
      },
      personData: [],
      head:'',
      applyWindow:false,
      tableDataFromDB:[],
      applyInfo:{},
    };
  },
  mounted() {
    this.getPersonage();
    get('/getAllApply').then((res)=>{
        console.log(res)
        this.tableDataFromDB = res.data
        console.log(this.tableDataFromDB)
      }
      )
    //console.log()

  },
  methods: {
    getPersonage() {
      get("/getPersonage", {
        patientId: this.patient.patient_id,
      }).then((res) => {
        this.personData = res.data;
        this.head=this.personData[0].name
        console.log(res)
         for(var i=0;i<this.personData.length;i++){
          if(this.personData[i].amwork=='0')
            this.personData[i].amwork='休息';
          if(this.personData[i].pmwork=='0')
            this.personData[i].pmwork='休息';
        }
        console.log(this.personData[0].special);
      });
    },
    tuichu() {
      sessionStorage.clear();
      console.log(sessionStorage);
      this.$router.push({
        name: "login",
      });
      ElMessage({
        message: "退出成功！",
        type: "success",
      });
    },
    reset(item) {
      get("/deletePatientDoctor", {
        id: item.id,
      }).then(() => {
        ElMessage({
        message: "取消成功！",
        type: "success",
      });
      });
      location.reload();
    },
    add() {//未绑定变量
      this.applyWindow = !this.applyWindow
    },
    addApply(){
      this.applyWindow =! this.applyWindow
      console.log(this.applyInfo.userName);
      console.log(this.applyInfo.pictureUrl);
      get('/addApply',{
        userName: this.applyInfo.userName,
        pictureUrl: this.applyInfo.pictureUrl
      }).then((res) => {
        console.log(res.data)
        ElMessage({
          message:'提交成功 我们会尽快审核',
          type:'success'
        })
        //window.location.reload()
      })
    }
  },
};
</script>

<style lang="scss" scoped>
html {
  margin: 0;
  padding: 0;
}
ul {
  margin: 0;
  padding: 0;
}
.child1 {
  background-color: #157a35;
  height: 35px;
  width: 10%;

  text-align: center;
  color: white;
}
.child2 {
  position: relative;
  border: 1px solid rgb(228, 225, 225);
  height: 155px;
  width: 40%;
  color: rgb(129, 122, 122);
  margin-top: -15px;
}
.child3 {
  background-color: #157a35;
  height: 35px;
  width: 10%;
  text-align: center;
  color: white;
}
.child4 {
  height: 155px;
  width: 60%;
  float: left;
  color: white;
  margin-top: -15px;
}

.main {
  margin-left: 10%;
  margin-top: 55px;
}
.title1 {
  float: left;
  size: 25px;
}
.xinxi {
  margin-left: 5%;
  float: left;
  margin-top: 2px;
}
.jz {
  position: relative;
  margin-top: 5px;
}
.aa {
  margin-left: 5%;
  margin-top: 15px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  float: left;
}
.aa img {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0 auto;
  height: 100%;
}
.xx {
  margin-left: 10%;
  width: 50%;
  float: left;
}
.tc {
  position: absolute;
  left: 50%;
  bottom: 15%;
}
.dz {
  position: absolute;
  left: 75%;
  bottom: 10%;
}
</style>
